<template>
  <div>
    <div class="header-box clearfix">
      <img class="left logo-img" :src="logoSrc" :alt="systemName">
      <div class="topbar-left">
        <span class="logo">垃圾分类与回收公益平台</span>
        <!-- 菜单 -->
        <Menu class="right nav" mode="horizontal" theme="dark" :active-name="activeMenu" @on-select="setActiveMenu">

          <template>
            <!-- <MenuItem class="link" name="1" to="/">新闻管理</MenuItem> -->
            <Submenu class="link" name="1">
              <template slot="title">
                  新闻管理
              </template>
              <MenuItem name="1-1" to="/paperType">新闻类型管理</MenuItem>
              <MenuItem name="1-2" to="/">新闻管理</MenuItem>
            </Submenu>
            <Submenu class="link" name="2">
              <template slot="title">
                  垃圾管理
              </template>
              <MenuItem name="2-1" to="/rubbishType">垃圾类型管理</MenuItem>
              <MenuItem name="2-2" to="/rubbishManage">垃圾管理</MenuItem>
            </Submenu>
            <!-- <MenuItem class="link" name="2" to="/rubbishManage">垃圾管理</MenuItem> -->
            <MenuItem class="link" name="3" to="/publicWelfare">公益管理</MenuItem>
            <MenuItem class="link" name="4" to="/userManage">用户管理</MenuItem>
            <MenuItem class="link" name="5" to="/dashboard">数据统计</MenuItem>
          </template>
        </Menu>
      </div>
      <div class="topbar-right">
        <ul class="topbar-user clearfix">
          <li>
            <span>你好，{{user.username}}</span>
          </li>
          <!-- <li>
                        <span class="link" @click="toWhichPage('/notice',6)">
                            <Icon type="ios-notifications" size='26'/>
                            <i class="mbadge" v-if="isShow">{{notieNum}}</i>
                       </span>
                    </li> -->
          <li class="link">
            <Icon v-show="!isFullScreen" type="md-expand" size='20' @click='fullScreen(true)' />
            <Icon v-show="isFullScreen" type="md-contract" size='20' @click='fullScreen(false)' />
          </li>
          <li class="link" @click="modal=true">
            <Icon type="md-power" size='18' />
            注销
          </li>
        </ul>
      </div>
    </div>
    <!-- 删除对话框 -->
    <Modal v-model="modal">
      <p slot="header" style="color:#f60">
        <Icon type="ios-information-circle"></Icon>
        <span>操作确认</span>
      </p>
      <div style="font-size:14px">
        <p style="color:#000">请确认是否退出本系统？</p>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="modal=false">取消</Button>
        <Button type="error" size="large" @click="logout">确认注销</Button>
      </div>
    </Modal>
  </div>

  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import bingganUtils from "../assets/js/util";
export default {
  name: "topHeader",
  data() {
    return {
      logoSrc: require("@/assets/images/logo.png"),
      systemName: "垃圾分类与回收公益平台",
      navStuArr: [
        { name: "1", title: "课程学习", to: "/" },
        { name: "12", title: "在线实验", to: "/exam" }
      ],
      userVisible: false,
      modal: false,
      isFullScreen: false //是否全屏
    };
  },
  props: ["user"],
  computed: {
    ...mapState(["activeMenu"])
  },
  methods: {
    ...mapMutations(["slideToggle", "REMOVE_COUNT", "setActiveMenu"]),
    logout() {
      this.$router.replace("/login");
      this.REMOVE_COUNT();
    },
    toWhichPage(page, name) {
      this.$router.push(page);
      let val = name ? name + "" : "1";
      this.setActiveMenu(val);
      name || (this.userVisible = false);
    },
    fullScreen(bool) {
      this.isFullScreen = bool;
      bool ? bingganUtils.fullScreen() : bingganUtils.exitScreen();
    }
  }
};
</script>
<style lang="scss" scoped>
.header-box {
  position: absolute;
  width: 100%;
  background-color: #028097;
  color: #fff;
  height: 76px;
  line-height: 76px;
  top: 0;
  left: 0;
  .logo-img {
    height: 60px;
    margin-top: 8px;
    margin-left: 20px;
  }
  .logo {
    font-size: 26px;
  }
  .link {
    display: block;
    height: 100%;
    color: #fff !important;
    cursor: pointer;
  }
  .topbar-left {
    float: left;
    padding-left: 20px;
    .logo {
      margin-top: 10px;
    }
    .sysname {
      display: inline-block;
      min-width: 220px;
      font-size: 18px;
      vertical-align: sub;
    }
  }
  .topbar-right {
    float: right;
    padding-right: 20px;
  }
  .clickable {
    cursor: pointer;
  }
  .user-control {
    li {
      float: none !important;
      text-align: center;
      padding: 3px 0;
      cursor: pointer;
      color: #858b94;
      transition: color 0.3s ease;
      &:hover {
        color: #f6ca9d;
      }
    }
  }

  .topbar-user > li {
    float: left;
    position: relative;
    font-size: 14px;
    padding: 0 10px;
    transition: all 0.3s ease-in-out;
    &.link {
      &:hover {
        background-color: rgba(0, 0, 0, 0.18);
      }
      cursor: pointer;
    }
    .mbadge {
      position: absolute;
      background-color: #ef5350;
      border-radius: 10px;
      padding: 0 6px;
      height: 20px;
      line-height: 20px;
      top: 15px;
      right: 4px;
      transform: scale(0.8, 0.8);
    }
  }
}
</style>
<style lang="scss">
.user-poptip {
  .ivu-poptip-rel {
    line-height: normal;
  }
  .ivu-poptip-body {
    padding: 3px 10px;
  }
}

.nav.ivu-menu-dark {
  &.ivu-menu-horizontal,.ivu-menu-submenu{
    height: 76px !important;
    line-height: 76px !important;
    background-color: transparent !important;
    color: #fff !important;
    z-index: 2;
  }
  margin-left: 35px;
  .link {
    padding: 0 10px !important;
    font-size: 16px;
    &:hover,
    &.ivu-menu-item-active {
      background-color: rgba(0, 0, 0, 0.18) !important;
      color: #ffd9c2 !important;
    }
    &:not(:last-child) {
      margin-right: 8px;
    }
    .ivu-menu-submenu-title span > i,
    .ivu-menu-submenu-title > i {
      margin-right: 0;
    }
  }
}
</style>
